<template>
    <img :src="imgs.y0.x0.src" width="400" height="300" :x="imgs.y0.x0.x" :y="imgs.y0.x0.y" :color="imgs.y0.x0.color"></img>
    <img :src="imgs.y0.x1.src" width="400" height="300" :x="imgs.y0.x1.x" :y="imgs.y0.x1.y" :color="imgs.y0.x1.color"></img>
    <img :src="imgs.y0.x2.src" width="400" height="300" :x="imgs.y0.x2.x" :y="imgs.y0.x2.y" :color="imgs.y0.x2.color"></img>
    <img :src="imgs.y0.x3.src" width="400" height="300" :x="imgs.y0.x3.x" :y="imgs.y0.x3.y" :color="imgs.y0.x3.color"></img>
    <img :src="imgs.y1.x0.src" width="400" height="300" :x="imgs.y1.x0.x" :y="imgs.y1.x0.y" :color="imgs.y1.x0.color"></img>
    <img :src="imgs.y1.x1.src" width="400" height="300" :x="imgs.y1.x1.x" :y="imgs.y1.x1.y" :color="imgs.y1.x1.color"></img>
    <img :src="imgs.y1.x2.src" width="400" height="300" :x="imgs.y1.x2.x" :y="imgs.y1.x2.y" :color="imgs.y1.x2.color"></img>
    <img :src="imgs.y1.x3.src" width="400" height="300" :x="imgs.y1.x3.x" :y="imgs.y1.x3.y" :color="imgs.y1.x3.color"></img>
    <img :src="imgs.y2.x0.src" width="400" height="300" :x="imgs.y2.x0.x" :y="imgs.y2.x0.y" :color="imgs.y2.x0.color"></img>
    <img :src="imgs.y2.x1.src" width="400" height="300" :x="imgs.y2.x1.x" :y="imgs.y2.x1.y" :color="imgs.y2.x1.color"></img>
    <img :src="imgs.y2.x2.src" width="400" height="300" :x="imgs.y2.x2.x" :y="imgs.y2.x2.y" :color="imgs.y2.x2.color"></img>
    <img :src="imgs.y2.x3.src" width="400" height="300" :x="imgs.y2.x3.x" :y="imgs.y2.x3.y" :color="imgs.y2.x3.color"></img>
    <img :src="imgs.y3.x0.src" width="400" height="300" :x="imgs.y3.x0.x" :y="imgs.y3.x0.y" :color="imgs.y3.x0.color"></img>
    <img :src="imgs.y3.x1.src" width="400" height="300" :x="imgs.y3.x1.x" :y="imgs.y3.x1.y" :color="imgs.y3.x1.color"></img>
    <img :src="imgs.y3.x2.src" width="400" height="300" :x="imgs.y3.x2.x" :y="imgs.y3.x2.y" :color="imgs.y3.x2.color"></img>
    <img :src="imgs.y3.x3.src" width="400" height="300" :x="imgs.y3.x3.x" :y="imgs.y3.x3.y" :color="imgs.y3.x3.color"></img>
    <box width="800" height="600" @down="walk" @rightdown="run" @up="stop" @rightup="stop" @move="changeDir"></box>
</template>

<script>
    //大地图懒加载
    init(){
        this.cellX = 45;//格子像素
        this.cellY = 30;
        this.info = {
            mapId: 3,//地图编号
            picW: 400,//单张图片像素宽
            picH: 300,
            numW: 23,//横向总数
            numH: 21,
        };
        this.imgs = {//4x4的图片就能包裹所有地图图片
            y0: {
                x0: { src: "", x: 0, y: 0, xId: 0, yId: 0, color: "" },
                x1: { src: "", x: 0, y: 0, xId: 0, yId: 0, color: "" },
                x2: { src: "", x: 0, y: 0, xId: 0, yId: 0, color: "" },
                x3: { src: "", x: 0, y: 0, xId: 0, yId: 0, color: "" }
            },
            y1: {
                x0: { src: "", x: 0, y: 0, xId: 0, yId: 0, color: "" },
                x1: { src: "", x: 0, y: 0, xId: 0, yId: 0, color: "" },
                x2: { src: "", x: 0, y: 0, xId: 0, yId: 0, color: "" },
                x3: { src: "", x: 0, y: 0, xId: 0, yId: 0, color: "" }
            },
            y2: {
                x0: { src: "", x: 0, y: 0, xId: 0, yId: 0, color: "" },
                x1: { src: "", x: 0, y: 0, xId: 0, yId: 0, color: "" },
                x2: { src: "", x: 0, y: 0, xId: 0, yId: 0, color: "" },
                x3: { src: "", x: 0, y: 0, xId: 0, yId: 0, color: "" }
            },
            y3: {
                x0: { src: "", x: 0, y: 0, xId: 0, yId: 0, color: "" },
                x1: { src: "", x: 0, y: 0, xId: 0, yId: 0, color: "" },
                x2: { src: "", x: 0, y: 0, xId: 0, yId: 0, color: "" },
                x3: { src: "", x: 0, y: 0, xId: 0, yId: 0, color: "" }
            }
        };
        this.moveing = false;
        this.keepMove = false;
        this.moveTime = 0;
        this.moveTimeTemp = 0;
        this.moveStep = { x: 0, y: 0 }; //移动步伐
        this.movePixel = { x: 0, y: 0 };//每贞移动像素
    }

    create() {
        console.log("map create");
    }

    update(delta) {
        if (this.moveTimeTemp > 0) {
            this.moveTimeTemp -= delta;
            //地图移动
            for (let yk in this.imgs) {
                for (let xk in this.imgs[yk]) {
                    //逐步移向目标点
                    this.imgs[yk][xk].x -= this.movePixel.x;
                    this.imgs[yk][xk].y -= this.movePixel.y;
                }
            }
            //屏幕对象移动
            GAME.screenMove(this.movePixel.x, this.movePixel.y)
            if (this.moveTimeTemp <= 0) {//到达目标点 更新坐标给角色类  这里长跑有BUG
                this.moveing = false;
                PLAYER.info.x += this.moveStep.x;
                PLAYER.info.y += this.moveStep.y;
                //console.log(PLAYER.info.x, PLAYER.info.y);
                if (this.keepMove && this.canMove(this.moveStep.x, this.moveStep.y)) {//鼠标未抬起 继续移动
                    this.moveTimeTemp = this.moveTime;
                }
                this.lazyload();//热更新地图图片
            }
        }
    }

    destroyed() {

    }

    loadMap(mapId, x, y) {
        let imgInfo = this.pointFormat(x, y);
        this.info.mapId = mapId;
        for (let indexX = 0; indexX < 4; indexX++) {
            for (let indexY = 0; indexY < 4; indexY++) {
                this.imgs["y" + indexY]["x" + indexX].xId = imgInfo.xId + indexX - 1;
                this.imgs["y" + indexY]["x" + indexX].yId = imgInfo.yId + indexY - 1;
                this.imgs["y" + indexY]["x" + indexX].x = (indexX - 1) * this.info.picW - this.info.picW / 2 + imgInfo.pyX;
                this.imgs["y" + indexY]["x" + indexX].y = (indexY - 1) * this.info.picH - this.info.picH / 2 + imgInfo.pyY;
                this.setImgSrc("y" + indexY, "x" + indexX);
            }
        }
    }

    pointFormat(x, y) {
        let inX = x * this.cellX;//(全图)人物所在像素点X
        let inY = y * this.cellY;
        let xId = Math.ceil(inX / this.info.picW);//人物所在图片ID
        let yId = Math.ceil(inY / this.info.picH);
        let pyX = xId * this.info.picW - inX;//像素偏移
        let pyY = yId * this.info.picH - inY;
        return { xId: xId, yId: yId, pyX: pyX, pyY: pyY };
    }

    pointToScreen(x, y) {
        let point = this.pointFormat(x, y)
        return { x: point.pyX, y: point.pyY };
    }

    setImgSrc(y, x) {
        if (this.imgs[y][x].xId < 1) {
            return;
        }
        if (this.imgs[y][x].yId < 1) {
            return;
        }
        if (this.imgs[y][x].xId > this.info.numW) {
            return;
        }
        if (this.imgs[y][x].yId > this.info.numH) {
            return;
        }
        this.imgs[y][x].color = "";
        if ( //边界暗化
            this.imgs[y][x].xId < 3 ||
            this.imgs[y][x].xId >= this.info.numW ||
            this.imgs[y][x].yId < 3 ||
            this.imgs[y][x].yId >= this.info.numH
        ) {
            this.imgs[y][x].color = "#AAAAAAEE";
        }
        this.imgs[y][x].src = "res/map/" + this.info.mapId + "/" + this.imgs[y][x].yId + "_" + this.imgs[y][x].xId + ".jpg";
    }

    lazyload() {// 总渲染4x4  可视最大范围 3x3   剩余1x1的移动到边缘 并进行预加载
        for (let indexX = 0; indexX < 4; indexX++) {
            for (let indexY = 0; indexY < 4; indexY++) {
                if (this.imgs["y" + indexY]["x" + indexX].x < -this.info.picW * 1.5) {
                    this.imgs["y" + indexY]["x" + indexX].x += this.info.picW * 4;
                    this.imgs["y" + indexY]["x" + indexX].xId += 4;
                }
                if (this.imgs["y" + indexY]["x" + indexX].y < -this.info.picH * 1.5) {
                    this.imgs["y" + indexY]["x" + indexX].y += this.info.picH * 4;
                    this.imgs["y" + indexY]["x" + indexX].yId += 4;
                }
                if (this.imgs["y" + indexY]["x" + indexX].x > this.info.picW * 2.5) {
                    this.imgs["y" + indexY]["x" + indexX].x -= this.info.picW * 4;
                    this.imgs["y" + indexY]["x" + indexX].xId -= 4;
                }
                if (this.imgs["y" + indexY]["x" + indexX].y > this.info.picH * 2.5) {
                    this.imgs["y" + indexY]["x" + indexX].y -= this.info.picH * 4;
                    this.imgs["y" + indexY]["x" + indexX].yId -= 4;
                }                
                this.setImgSrc("y" + indexY, "x" + indexX);
            }
        }
    }

    stepMove(x, y) {//设定移动偏移
        this.moveing = true;
        this.moveStep = { x: x, y: y };
        this.moveTime = PLAYER.aniInfo.time; //移动总耗时 (秒)
        this.moveTimeTemp = PLAYER.aniInfo.time;
        this.movePixel.x = x * this.cellX / app.FPS / this.moveTime;
        this.movePixel.y = y * this.cellY / app.FPS / this.moveTime;
    }

    walk(event) {
        let dir = this.getDir(event.x, event.y);
        let point = this.stepPoint(dir, 1);
        if (!this.canMove(point.x, point.y)) {
            return;
        }
        this.keepMove = true;
        PLAYER.updatePlayerAni(dir, 1);
        this.stepMove(point.x, point.y);//开始移动
    }

    run(event) {
        let dir = this.getDir(event.x, event.y);
        let point = this.stepPoint(dir, 2);
        if (!this.canMove(point.x, point.y)) {
            return;
        }
        this.keepMove = true;
        PLAYER.updatePlayerAni(dir, 2);
        this.stepMove(point.x, point.y);
    }

    stop(event) {
        this.keepMove = false;
    }

    canMove(x, y) {
        if (this.moveing) {
            return false;
        }
        let xx = (PLAYER.info.x + x) * this.cellX;
        if (xx < app.width / 1.5 || xx > this.info.numW * this.info.picW - app.width / 1.5) {//封边
            return false;
        }
        let yy = (PLAYER.info.y + y) * this.cellY;
        if (yy < app.height / 1.5 || yy > this.info.numH * this.info.picH - app.height / 1.5) {
            return false;
        }
        return true;
    }

    changeDir(event) {
        if (!this.keepMove) {
            return;
        }
        if (PLAYER.info.status == 1) {
            this.walk(event);
        } else if (PLAYER.info.status == 2) {
            this.run(event);
        }
    }

    getDir(x, y) {//取人物朝向  8方向
        let angle = Math.atan2(x - app.screen.width / 2, y - app.screen.height / 2);
        angle = angle * (180 / Math.PI) + 180; //0->7逆时针360 每个方向占45度  22.5 - 342.5  =  0方向
        if (angle <= 22.5 || angle > 337.5) {
            return 0;//上
        } else if (angle <= 337.5 && angle > 292.5) {
            return 1;//右上
        } else if (angle <= 292.5 && angle > 247.5) {
            return 2;//右
        } else if (angle <= 247.5 && angle > 202.5) {
            return 3;//右下
        } else if (angle <= 202.5 && angle > 157.5) {
            return 4;//下
        } else if (angle <= 157.5 && angle > 112.5) {
            return 5;//左下
        } else if (angle <= 112.5 && angle > 67.5) {
            return 6;//左
        } else if (angle <= 67.5 && angle > 22.5) {
            return 7;//左上
        }
    }

    stepPoint(dir, step){//dir 朝向 step 每次点击移动距离 步伐数
        if (dir == 0) {
            return { x: 0, y: -step };
        } else if (dir == 1) {
            return { x: step, y: -step };
        } else if (dir == 2) {
            return { x: step, y: 0 };
        } else if (dir == 3) {
            return { x: step, y: step };
        } else if (dir == 4) {
            return { x: 0, y: step };
        } else if (dir == 5) {
            return { x: -step, y: step };
        } else if (dir == 6) {
            return { x: -step, y: 0 };
        } else if (dir == 7) {
            return { x: -step, y: -step };
        }
    }

</script>